/**
 *
 * 矢量形状
 *
 */
function SvgShape(shape) {
    this.namespace = "http://www.w3.org/2000/svg";
    this.shape = shape;

    var element = null;

    var setStroke = function (prop, args) {
        prop["stroke"] = args.color ? args.color : this.penProp ? this.penProp.color : "black";
        prop["stroke-width"] = args.width ? args.width : this.penProp ? this.penProp.width : 1;
    }

    //扩展或替换属性
    var extend = function (source, target) {
        for (var i in target) {
            source[i] = target[i];
        }
        return source;
    }

    //创建元素
    var createElement = function (type) {
        var element = document.createElementNS(this.namespace, type);

        element.actionType = "create";

        //设置相关属性
        element.setAllProps = function (props) {
            for (var i in props) {
                this.setAttribute(i, props[i]);
            }
            this.customProp = props;
        }

        //获取相关属性
        element.getAllProps = function () {
            for (var i in this.customProp) {
                this.customProp[i] = this.getAttribute(i);
            }
            return this.customProp;
        }

        return element;
    }

    //############ 创建直线 ############
    var createLine = function (args) {
        var line = createElement.call(this, 'line');
        var x1 = args.x1 ? args.x1 : 0,
            y1 = args.y1 ? args.y1 : 0;

        var customProp = {
            "x1": args.x1 ? args.x1 : 0,
            "y1": args.y1 ? args.y1 : 0,
            "x2": args.x2 ? args.x2 : x1,
            "y2": args.y2 ? args.y2 : y1,
            "data-type": "line"
        };

        setStroke.call(this, customProp, args);

        line.setAllProps(customProp);

        //设置大小
        line.switchSize = function (x, y) {
            this.setAttribute("x2", x);
            this.setAttribute("y2", y);
        };

        //是否被选中
        line.hasSelected = function () {
            return this.classList.contains("selected");
        }

        //设置移动标记
        line.startMove = function (x, y) {
            this.classList.add("selected", "move");
            //设置起始坐标
            this.setAttribute("data-rect", this.getAttribute("x1") + "," + this.getAttribute("y1") + "," +
                this.getAttribute("x2") + "," + this.getAttribute("y2") + "," + x + "," + y);
        }

        //移动到指定位置
        line.moveTo = function (x, y) {
            if (!this.classList.contains("move")) return;

            var srect = this.getAttribute("data-rect");
            var arr = srect.split(","),
                sx1 = parseFloat(arr[0]),
                sy1 = parseFloat(arr[1]),
                sx2 = parseFloat(arr[2]),
                sy2 = parseFloat(arr[3]),
                mx = parseFloat(arr[4]),
                my = parseFloat(arr[5]);

            this.setAttribute("x1", sx1 + (x - mx));
            this.setAttribute("y1", sy1 + (y - my));
            this.setAttribute("x2", sx2 + (x - mx));
            this.setAttribute("y2", sy2 + (y - my));
        };

        //设置停止移动标记
        line.stopMove = function () {
            this.classList.remove("selected", "move");
        }

        return line;
    }

    //############ 创建矩形 ############
    var createRect = function (args) {
        var rect = createElement.call(this, 'rect');

        var customProp = {
            "x": args.x1 ? args.x1 : 0,
            "y": args.y1 ? args.y1 : 0,
            "rx": args.rx ? args.rx : 0,
            "ry": args.ry ? args.ry : 0,
            "width": args.width ? args.width : 1,
            "height": args.height ? args.height : 1,
            "fill": args.fill ? args.fill : "none",
            "data-type": "rect"
        };

        setStroke.call(this, customProp, args);

        rect.setAllProps(customProp);

        //设置大小
        rect.switchSize = function (x, y) {
            var sx = this.getAttribute("x"),
                sy = this.getAttribute("y");

            var dx = this.getAttribute("data-x"),
                dy = this.getAttribute("data-y");

            if (dx == null || dy == null) {
                this.setAttribute("data-x", sx);
                this.setAttribute("data-y", sy);

                dx = sx;
                dy = sy;
            }

            dx = parseFloat(dx);
            dy = parseFloat(dy);

            var width = x - dx,
                height = y - dy;

            if (width < 0) {
                sx = x;
                this.setAttribute("x", sx);
            }

            if (height < 0) {
                sy = y;
                this.setAttribute("y", sy);
            }

            this.setAttribute("width", Math.abs(width));
            this.setAttribute("height", Math.abs(height));
        };

        //是否被选中
        rect.hasSelected = function () {
            return this.classList.contains("selected");
        }

        //设置移动标记
        rect.startMove = function (x, y) {
            this.classList.add("selected", "move");
            //设置起始坐标
            this.setAttribute("data-rect", this.getAttribute("x") + "," + this.getAttribute("y") + "," + x + "," + y);
        }

        //移动到指定位置
        rect.moveTo = function (x, y) {
            if (!this.classList.contains("move")) return;

            var srect = this.getAttribute("data-rect");
            var arr = srect.split(","),
                sx = parseFloat(arr[0]),
                sy = parseFloat(arr[1]),
                mx = parseFloat(arr[2]),
                my = parseFloat(arr[3]);

            this.setAttribute("x", sx + (x - mx));
            this.setAttribute("y", sy + (y - my));
        };

        //设置停止移动标记
        rect.stopMove = function () {
            this.classList.remove("selected", "move");
        }

        return rect;
    }

    //############ 创建圆 ############
    var createCircle = function (args) {
        var circle = createElement.call(this, 'circle');

        var customProp = {
            "cx": args.x1 ? args.x1 : 0,
            "cy": args.y1 ? args.y1 : 0,
            "r": args.r ? args.r : 0,
            "fill": args.fill ? args.fill : "none",
            "data-type": "circle"
        };

        setStroke.call(this, customProp, args);

        circle.setAllProps(customProp);

        //设置大小
        circle.switchSize = function (x, y) {
            var cx = this.getAttribute("cx"),
                cy = this.getAttribute("cy");

            var width = x - cx,
                height = y - cy;

            var r = Math.abs(width) > Math.abs(height) ? Math.abs(width) : Math.abs(height);

            this.setAttribute("r", r);
        };

        //是否被选中
        circle.hasSelected = function () {
            return this.classList.contains("selected");
        }

        //设置移动标记
        circle.startMove = function (x, y) {
            this.classList.add("selected", "move");
            //设置起始坐标
            this.setAttribute("data-rect", this.getAttribute("cx") + "," + this.getAttribute("cy") + "," + x + "," + y);
        }

        //移动到指定位置
        circle.moveTo = function (x, y) {
            if (!this.classList.contains("move")) return;

            var srect = this.getAttribute("data-rect");
            var arr = srect.split(","),
                sx = parseFloat(arr[0]),
                sy = parseFloat(arr[1]),
                mx = parseFloat(arr[2]),
                my = parseFloat(arr[3]);

            this.setAttribute("cx", sx + (x - mx));
            this.setAttribute("cy", sy + (y - my));
        };

        //设置停止移动标记
        circle.stopMove = function () {
            this.classList.remove("selected", "move");
        }

        return circle;
    }

    //############ 创建椭圆 ############
    var createEllipse = function (args) {
        var ellipse = createElement.call(this, 'ellipse');

        var customProp = {
            "cx": args.x1 ? args.x1 : 0,
            "cy": args.y1 ? args.y1 : 0,
            "rx": args.rx ? args.rx : 0,
            "ry": args.ry ? args.ry : 0,
            "fill": args.fill ? args.fill : "none",
            "data-type": "ellipse"
        };

        setStroke.call(this, customProp, args);

        ellipse.setAllProps(customProp);

        //设置大小
        ellipse.switchSize = function (x, y) {
            var cx = this.getAttribute("cx"),
                cy = this.getAttribute("cy");

            var width = x - cx,
                height = y - cy;

            this.setAttribute("rx", Math.abs(width));
            this.setAttribute("ry", Math.abs(height));
        };

        //是否被选中
        ellipse.hasSelected = function () {
            return this.classList.contains("selected");
        }

        //设置移动标记
        ellipse.startMove = function (x, y) {
            this.classList.add("selected", "move");
            //设置起始坐标
            this.setAttribute("data-rect", this.getAttribute("cx") + "," + this.getAttribute("cy") + "," + x + "," + y);
        }

        //移动到指定位置
        ellipse.moveTo = function (x, y) {
            if (!this.classList.contains("move")) return;

            var srect = this.getAttribute("data-rect");
            var arr = srect.split(","),
                sx = parseFloat(arr[0]),
                sy = parseFloat(arr[1]),
                mx = parseFloat(arr[2]),
                my = parseFloat(arr[3]);

            this.setAttribute("cx", sx + (x - mx));
            this.setAttribute("cy", sy + (y - my));
        };

        //设置停止移动标记
        ellipse.stopMove = function () {
            this.classList.remove("selected", "move");
        }

        return ellipse;
    }

    //############ 创建文本 ############ 
    var createText = function (args) {
        var text = createElement.call(this, 'text');

        var customProp = {
            "x": args.x1 ? args.x1 : 0,
            "y": args.y1 ? args.y1 : 0,
            "font-family": args.fontSize ? args.fontSize : this.penProp ? this.penProp.font : "宋体",
            "font-size": args.fontSize ? args.fontSize : this.penProp ? this.penProp.fontSize : "12",
            "fill": args.color ? args.color : this.penProp ? this.penProp.color : "black",
            "data-type": "text"
        };

        text.setAllProps(customProp);

        //设置大小
        text.switchSize = function (x, y) {
        };

        //是否被选中
        text.hasSelected = function () {
            return this.classList.contains("selected");
        }

        //设置移动标记
        text.startMove = function (x, y) {
            this.classList.add("selected", "move");
            //设置起始坐标
            this.setAttribute("data-rect", this.getAttribute("x") + "," + this.getAttribute("y") + "," + x + "," + y);
        }

        //移动到指定位置
        text.moveTo = function (x, y) {
            if (!this.classList.contains("move")) return;

            var srect = this.getAttribute("data-rect");
            var arr = srect.split(","),
                sx = parseFloat(arr[0]),
                sy = parseFloat(arr[1]),
                mx = parseFloat(arr[2]),
                my = parseFloat(arr[3]);

            this.setAttribute("x", sx + (x - mx));
            this.setAttribute("y", sy + (y - my));
        };

        //设置停止移动标记
        text.stopMove = function () {
            this.classList.remove("move");
        }

        text.innerHTML = "输入文字";

        return text;
    }

    //############ 创建foreignObject ############ 
    var createForeginObject = function (args) {
        var text = createElement.call(this, 'foreignObject');

        var customProp = {
            "x": args.x1 ? args.x1 : 0,
            "y": args.y1 ? args.y1 : 0,
            "width": args.width ? args.width : 0,
            "height": args.height ? args.height : 0,
            "font-family": args.fontSize ? args.fontSize : this.penProp ? this.penProp.font : "宋体",
            "font-size": args.fontSize ? args.fontSize : this.penProp ? this.penProp.fontSize : "12",
            "fill": args.color ? args.color : this.penProp ? this.penProp.color : "black",
            "data-type": "foreignObject"
        };

        text.setAllProps(customProp);

        //设置大小
        text.switchSize = function (x, y) {
        };

        //是否被选中
        text.hasSelected = function () {
            return this.classList.contains("selected");
        }

        //设置移动标记
        text.startMove = function (x, y) {
            this.classList.add("selected", "move");
            //设置起始坐标
            this.setAttribute("data-rect", this.getAttribute("x") + "," + this.getAttribute("y") + "," + x + "," + y);
        }

        //移动到指定位置
        text.moveTo = function (x, y) {
            if (!this.classList.contains("move")) return;

            var srect = this.getAttribute("data-rect");
            var arr = srect.split(","),
                sx = parseFloat(arr[0]),
                sy = parseFloat(arr[1]),
                mx = parseFloat(arr[2]),
                my = parseFloat(arr[3]);

            this.setAttribute("x", sx + (x - mx));
            this.setAttribute("y", sy + (y - my));
        };

        //设置停止移动标记
        text.stopMove = function () {
            this.classList.remove("move");
        }

        text.innerHTML = "输入文字";

        return text;
    }

    //所有形状构造函数集合
    this.map = {
        "line": createLine,
        "rect": createRect,
        "circle": createCircle,
        "ellipse": createEllipse,
        "text": createText,
        "foreignObject": createForeginObject
    }

    //#######################################
    //#             创建形状                 #
    //#######################################
    this.create = function (args) {
        var method = this.map[this.shape];
        if (method) {
            element = method.call(this, args);
            element.ownerManager = this;
            return element;
        }
        return null;
    }
}

/**
 * 绘制形状
 * @param {*} type "line": 线, "rect": 矩形, "circle": 圆, "ellipse": 椭圆, "text": 文字
 * @param {*} args "color":颜色, "width":宽度，根据具体形状设置坐标等
 * @returns 
 */
export default function drawSvgShape(type, args){
    //新建形状
    var svgShape = new SvgShape(type);
    //设置笔属性
    svgShape.penProp = {
        //粗细
        _width : 1,
        //颜色
        _color : "black",
        //字体
        _font : "宋体",
        //字体大小
        _fontSize : 12,
        get width(){
            return this._width;
        },
        set width(val){
            this._width = parseFloat(val);
        },
        get color(){
            return this._color;
        },
        set color(val){
            this._color = val;
        },
        get font(){
            return this._font;
        },
        set font(val){
            this._font = val;
        },
        get fontSize(){
            return this._fontSize;
        },
        set fontSize(val){
            this._fontSize = parseFloat(val);
        },
        //将值转换为数组
        toArray : function(){
            var arr = [];
    
            for(var i in this){
                if(i == "toArray") continue;
                arr.push(this[i]);
            }
    
            return arr;
        }
    };

    //绘制形状
    return svgShape.create(args);
}